<template>
  <view :class="$style.content">
    <view class="flex flex-row" :class="$style.header">
      <view :class="$style.title">{{ titleName }}</view>
      <view class="flex" :class="$style.date">
        <uuTab :tabs="tabs" @clickTab="clickTab"></uuTab>
      </view>
    </view>

    <view :class="$style.statistic">
      <block v-for="item in staticData" :key="item.csCode">
        <view :class="$style.item" class="flex-col-center">
          <view :class="$style.type">{{ item.tjmc }}</view>
          <view class="flex items-center">
            <image :src="item.tbdz" mode="widthFix" style="width: 36rpx; height: 36rpx;"></image>
            <view :class="$style.number">
              <text :class="$style.count">{{ item.count }} </text>
              <text>起</text>
            </view>
          </view>
        </view>
      </block>
    </view>

  </view>
</template>

<script setup lang='ts'>
import uuTab from "@/components/common/uu-tab.vue";

import { onMounted, ref } from "vue";
import { queryRqjqTjxx } from "@/api";

onMounted(() => {
  // 初始化获取 警情统计数据
  getList(0);
});

let staticData = ref<any>([]);

const tabs = [
  { label: "今日", value: 0 },
  { label: "本月", value: 1 },
  { label: "今年", value: 2 },
];


/**定义 emit 事件 */
const emit = defineEmits(["changeTimeDuration"]);

const props = defineProps({
  titleName: String,
});

/** 
 * 获取警情统计数据 
 * */
function getList(value: number | string) {
  queryRqjqTjxx({ tjzq: value })
    .then((res: any) => {
      console.log("燃气事故统计", res);
      staticData.value = res.data;
    })
    .catch((e: any) => {
      console.log(e);
    });
}

/**
 * 切换时间  shift
 */
const clickTab = (e: any) => {
  getList(e.value);
  emit('changeTimeDuration', e.value)
};



</script>

<style lang='less' module>
.content {
  position: relative;
  height: 270rpx;
  width: calc(100vw - 40rpx);
  background: #ffffff;
  box-shadow: 0px 4px 19px 1px rgba(51, 51, 51, 0.2);
  border-radius: 20px;
  padding: 10rpx 20rpx;
  box-sizing: border-box;

  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #333333;

  .header {
    height: 70rpx;
    justify-content: space-between;
    align-items: center;
  }

  /**** 时间按钮切换样式 */
  .button {
    padding: 0 10rpx;
    background: transparent;
    font-weight: 400;
    color: #666666;

    &::after {
      border: 0;
    }
  }

  .title {
    font-size: 32rpx;
  }

  .statistic {
    height: 150rpx;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
  }

  .type {
    margin: 10rpx 0;
    font-size: 26rpx;
  }

  .number {
    margin-left: 5rpx;
    font-weight: 400;
    font-size: 26rpx;

    .count {
      font-size: 50rpx;
      font-family: Digital;
      font-weight: 700;
      margin: 0 10rpx;
    }
  }
}
</style>
